<template>
    <div class="page">
        <div class="header">
            <router-link to="/strategy" class="header-btnLeft"  ><img src="../assets/strategy-goback.png"></router-link>
            <h1 class="header-title">{{data.city_name}}</h1>
            <div class="header-btnRight">
                <div class="header-btnRight" @click="shareFn">
                    <img class="header-btnRight-img" src="../assets/article-icon-share.png">
                </div>
            </div>
        </div>
        <div class="article">
            <div class="article-bar">
                <img  v-if="!videoFlag" class="article-bar-img" :src="data.img" />
                <img  v-if="data.video && !videoFlag" class="article-bar-play" @click="videoPlay" src="../assets/play-btn.png">
                <my-video ref="myVideo" v-if="data.video"  class="article-bar-video" :sources="video.sources" :options="video.options"></my-video>
            </div>
            <div class="article-title">{{data.title}}</div>
            <div class="article-tag">
                <router-link :to="{path:'/guideline',query:{'keyword':item}}" class="article-tag-item" v-for="item in data.tag">{{item}}</router-link>
            </div>
            <div class="article-info">
                <span class="article-info-item">{{data.create_time}}</span>
                <span class="article-info-item"><div class="article-info-item-eyes"><img src="../assets/article-info-eyes.png" alt=""></div>{{data.browse}} </span>
                <span class="article-info-item"><div class="article-info-item-eyes"><img src="../assets/article-info-zan.png" alt=""></div>{{data.fabulous}} </span>
            </div>

            <!--<div  class="article-desc">{{data.description}}</div>-->
            <div class="article-content" v-html="data.content"></div>

        </div>
        <!--评价-->
        <div class="comment-box":style="{ height: wrapperHeight + 'px' }">
            <div class="comment-box-text">评价<span>({{this.commentCount}})</span></div>
            <div class="comment-box-userimg">
                <img id="bgbgimg" :src="userInfo.img ? /^(http|https):\/\//.test(userInfo.img) ? userInfo.img : url+userInfo.img : userAvatar" alt="">
                <input type="text" placeholder="留下你的精彩评论" @click="activcommentSend" >
            </div>
            <div class="comment" >
                <div class="comment-list">
                    <div class="comment-list-item" v-for="(item,index) in commentArr">
                        <div class="comment-list-item-head">
                            <img class="comment-list-item-head-avatar" :src="/^(http|https):\/\//.test(item.touxiang) ? item.touxiang : url+item.touxiang" />
                            <div class="comment-list-item-head-title">
                                <div class="comment-list-item-head-username">{{item.member_nickname}}</div>
                                <div class="comment-list-item-head-date">{{item.creattime}}</div>
                            </div>
                        </div>
                        <div class="comment-list-item-desc">{{item.content}}</div>
                        <div class="comment-list-item-imgs">
                            <img v-for="item2 in item.comment_img"  :src="/^(http|https):\/\//.test(item2.src) ? item2.src : url+item2.src" :preview="index" />
                        </div>
                    </div>
                    <div class="comment-list-item"  v-if="commentArr.length<=0" >暂无用户评价</div>
                </div>
            </div>
        </div>
        <div class="share-div" :style="{'top':shareTop +'px'}" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="h120"></div>
        <div class="buyBar">
            <div class="buyBar-list" >
                <!--@click="$router.go(-1)"-->
                <!--<router-link to="/guideline"   class="buyBar-list-back">-->
                    <!--<img class="buyBar-list-back-icon" src="../assets/return_red.png">-->
                <!--</router-link>-->
                <div class="buyBar-list-comment">
                    <input type="text" placeholder="留下你的精彩评论" @click="activcommentSend">
                </div>
                <div class="buyBar-list-item">
                    <div  class="buyBar-list-item-btn" @click="like"><img class="icon" :src="data.dianzan==1 ? likeArr.imgHover : likeArr.img "></div>
                    <router-link :to="'/article-comment/'+data.article_id"  class="buyBar-list-item-btn">
                        <img class="icon" src="../assets/article-icon-comment.png">
                        <span class="badge">{{data.comment_conut}}</span>
                    </router-link>
                    <div  class="buyBar-list-item-btn" @click="shareFn"><img class="icon" src="../assets/article-icon-share.png"></div>
                </div>
            </div>
        </div>
        <div class="comment-send" v-if="commentSend">
            <input type="text" placeholder="留下你的精彩评论" v-model="commentcontent" ref="inputVal"><span style="color: red" @click="activehide">发送</span></div>
        <div>
            <mt-popup
                v-model="popupVisible" popup-transition="popup-fade"
                position="">
                <div class="log-popup">
                    <div class="log-popup-text">登录后才可以评论哦~</div>
                    <div class="log-popup-button">
                        <div type="primary" class="log-popup-button-primary" @click="popupVisible=false">取消</div>
                        <div type="default" class="log-popup-button-default" @click="commentlogin">登录</div>
                    </div>
                </div>
            </mt-popup>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import config from "../store/config"
    import storage from "../store/localstorage"
    import store from "../store/store"
    import wxShare from "../store/wxShare"
    import myVideo from 'vue-video'
    export default {
        name: "Article",
        components:{
            myVideo
        },
        data(){
            return{
                url:config.url,
                id:'',
                data:'',
                likeArr:{
                    img:require('../assets/article-icon-dianzan.png'),
                    imgHover:require('../assets/icon-like-article-hover.png')
                },
                shareView: false,//分享
                shareTop: 0,
                video: {},
                videoFlag:false,
                commentArr:[], //评价
                article_id:0,
                userAvatar:require('../assets/hea-logo.png'), //默认显示头像
                userInfo:[],
                commentCount:0,
                commentSend:false, //
                commentcontent:'',//评价
                imgs:[],
                popupVisible:false,
                wrapperHeight:480,
                focus:true,
                city_id:0,
            }
        },
        methods:{
            getData(){
                this.axios.post('/wapdetails',{article_id:this.id,city_id:this.city_id})
                    .then((res)=>{
                        this.data=res.data
                        this.data.content=this.replaceImg(this.data.content);
                        this.data.content=this.formatImg(this.data.content);
                        var reg=/^(http|https):\/\//;
                        if(!reg.test(res.data.img)){
                            res.data.img=this.url+res.data.img
                        }
                        if(res.data.share_img && !reg.test(res.data.share_img)){
                            res.data.share_img=this.url+res.data.share_img
                        }
                        if(res.data.video){
                            if(!reg.test(res.data.video)){
                                res.data.video=this.url+res.data.video
                            }
                        }
                        if(this.data.video){
                            this.video.sources= [{
                                src: this.data.video,
                                type: 'video/mp4'
                            }];
                            this.video.options= {
                                autoplay: false,
                                volume: 0.6,
                                //poster: this.data.img
                            }
                        }
                        this.share();
                    })
            },
            // 视频播放
            videoPlay(){
                this.videoFlag=true
                this.$refs.myVideo.play();
            },
            // 替换图片路径
            replaceImg(data){
                data=data.replace( /<style(([\s\S])*?)<\/style>/gi,'');
                //data=data.replace( /style="(([\s\S])*?)"/gi,'');
                data=data.replace( /width="(([\s\S])*?)"/gi,'width="100%"');
                data=data.replace( /height="(([\s\S])*?)"/gi,'height="auto"');
                data=data.replace( /\/ueditor\//g,this.url+'/ueditor/');
                return data.replace( /p><img/ig,'p><img preview="99" ');
            },
            formatImg(html) {
                var newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
                    var match = match.replace(/style=\"(.*)\"/gi, '');
                    return match;
                });
                return newContent;
            },
            // 点赞
            like() {
                if(!this.$store.state.token){
                    this.$router.push({path:"/my-login"})
                    return;
                }
                var params = {
                    article_id: this.data.article_id
                }
                this.axios.post('wapfabulous',params)
                    .then(res => {
                        Toast({message: res.msg, duration: 1000});
                        if(res.msg=='点赞成功'){
                            this.data.dianzan=1
                        }else{
                            this.data.dianzan=0
                        }
                    })
                    .catch(err => console.log(err));
            },
            shareFn() {
                this.shareTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
                this.share();
                this.shareView = !this.shareView;

            },
            // 分享
            share() {
                //console.log('分享')
                var _that=this;
                wxShare({
                    title: '[快帮行]' + _that.data.title, // 分享标题
                    //link: window.location.href, // 分享链接
                    imgUrl:_that.data.share_img ? _that.data.share_img :_that.data.img, // 分享图标
                    debug: false
                },()=> {//分享成功后的回调函数
                    this.shareView=false
                    console.log('分享成功')
                });
            },
            //评价
            getevaluate() {
                let _that = this;
                let params = {
                    article_id: _that.article_id,
                }
                _that.axios.post('waparticlecomment', params)
                        .then(res => {
                    _that.commentArr=res.data
                    _that.commentCount=res.data.length
                    if(_that.commentCount==0){
                        this.wrapperHeight =140
                    }else if(_that.commentCount==1){
                        this.wrapperHeight =230
                    }else if(_that.commentCount==2){
                        this.wrapperHeight =350
                    }else if(_that.commentCount==3){
                        this.wrapperHeight =480
                    }
                })
            .catch(err => console.log(err));
            },
            //点击打开底部评论
            activcommentSend(el){
                this.commentSend=true
                this.$nextTick(function () {
                    //DOM 更新了
                    this.$refs.inputVal.focus()
                })
            },
            activehide(){
                if(!this.$store.state.token){
                    this.popupVisible=true
                }else{
                    this.commentSend=false
                    if(this.commentcontent==''){
                        Toast({message:'您还没有评论哦', duration: 1000});
                    }else{
                        var params={
                            article_id:this.article_id,
                            content:this.commentcontent,
                            comment_img:JSON.stringify(this.imgs),
                        }
                        this.axios.post('/wapaddcomment',params)
                                .then(res => {
                            Toast({message: res.msg, duration: 1000});
                            setTimeout(()=>{
                                this.$router.push('/article-comment/'+this.article_id)
                            },1000)
                        })
                    .catch(err => console.log(err));
                    }
                }

            },
            //弹窗取消



            //调用登录
            commentlogin(){
                this.$router.push({path:"/my-login"})
                return;
            },
        },
        mounted(){
          this.id=this.$route.params.id;
          this.article_id = this.$route.params.id;
//          this.city_id = this.$route.query.city_id;
          this.getevaluate();
          this.getData();
        },
        updated(){
            this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .header{
        display: flex;
        align-items: center;
        padding:rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
            h1{
                font-size: rpx(36);
                color: #333333;
                fontFamily: "SourceHanSansCN-Medium",
            }
            &-btnLeft{
                 width: rpx(50);
                 height: rpx(64);
                 /*padding-top: rpx(16);*/
                 line-height:rpx(64);
                    img{
                        width: rpx(22);
                        height: rpx(34);
                    }
            }
            &-btnRight{
                 color: #5D5D5D;
                    &-img {
                         width: rpx(48);
                         height: rpx(48);
                         margin-left: rpx(20);
                     }
            }
            &-title{
                 flex: 1;
                 font-size: rpx(36);
                 text-align: center;
                 font-weight: normal;
             }
    }
    .page {
        min-height: 100%;
        background-color: $color0;
    }
    .h120{
        height: rpx(120);
    }

    .article{
        &-bar{
            position: relative;
            width: 100%;
            height: rpx(500);
            &-play{
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 999;
                margin-left: rpx(-48);
                margin-top: rpx(-48);
                width: rpx(96);
                height: rpx(96);
            }
            &-img{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 998;
                width: 100%;
                height: rpx(500);

            }
            &-video{
                overflow: hidden;
                width: 100%;
                height: rpx(500);
            }
        }
        &-title{
            padding: rpx(40) rpx(30);
            font-size: rpx(40);
            line-height: 130%;
            color: #333333;
            font-weight: bold;
        }
        &-tag{
            padding: 0 rpx(30);
             height:100%;
             line-height:170%;
            &-item{
                margin-right: rpx(20);
                padding: rpx(6) rpx(10);
                border-radius: $radius20;
                border: 1px solid #666666;
                color: $color5;
                font-size: rpx(24);
            }
        }
        &-info {
            padding: rpx(30);
             /*border-bottom:rpx(1) solid #ccc;*/
            &-item {
                margin-right: rpx(40);
                color: $color5;
                font-size: rpx(28);
                &-eyes{
                    display: inline-block;
                    width: rpx(28);
                    height: rpx(28);
                     margin-right: rpx(10);
                    img{
                        vertical-align:baseline;
                        width: rpx(28);
                        height: rpx(21);
                    }
                 }
            }
        }
        &-desc{
            margin: rpx(20) rpx(30)  rpx(30);
            padding: rpx(20);
            background-color:#FFFBEA;
            font-size: rpx(30);
            line-height: 160%;
            color: #666;
        }
        &-content{
            padding: rpx(30);
            font-size: rpx(30);
            line-height: 160%;
            img{
                padding: rpx(10) 0;
                max-width: 100% !important;
                height: auto;
            }
        }
    }


    //评论
      .comment-box{
          border-top: rpx(10) solid #f5f5f5;
          /*height:rpx(940);*/
          overflow:hidden;
             &-text{
                padding:rpx(30) rpx(30) 0 rpx(30) ;
                span{
                    color: rgb(153,153,153);
                }
              }
             &-userimg{
                  padding:rpx(20) rpx(30);
                  img{
                      width:rpx(80);
                      height:rpx(80);
                  }
                  input{
                      display: inline-block;
                      background: #eeeeee;
                      width: 80%;
                      height: rpx(60);
                      margin: rpx(10) rpx(20);
                      border-radius:$radius30;
                      padding: 0 rpx(20);
                  }
              }
      }
      .comment{
            &-list{
                &-item{
                     border-bottom: solid 1px $color2;
                     padding: rpx(30);
                &-head{
                     display: flex;
                     align-items: center;
                     padding: rpx(20) 0;
                &-avatar{
                     width:rpx(80);
                     height:rpx(80);
                 }
                &-title{
                     padding: rpx(10) rpx(20);
                 }
                &-username{
                     font-size:rpx(30);
                 }
                &-date{
                     padding-top: rpx(10);
                     font-size:rpx(24);
                     font-size: $color5;
                 }
                }
                &-desc{
                     font-size: rpx(26);
                     line-height: 160%;
                     word-wrap:break-word;
                     word-break:normal;
                 }
                    &-imgs{
                         padding: rpx(20) 0;
                            img{
                                width:30.3%;
                                height: rpx(220);
                                margin-right: 3%;
                                margin-bottom: rpx(20);
                            }
                    }
                }
            }
            &-more{
                &-url{
                     display: block;
                     padding: rpx(20) rpx(30) ;
                     font-size: rpx(34);
                     text-align: center;
                     border:#b5b5b5 solid 1px;
                     border-radius:$radius6;
                 }
            }
    }

    //分享
    .share-div {
        position: absolute;
        background: rgba(0, 0, 0, .5);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999;
        width: 100%;
        height: 100%;
        text-align: center;
        &-img {
            margin-top: rpx(30);
            width: rpx(500);
            height: rpx(220);
        }
    }

    .comment-send{
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: $color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        height: rpx(100);
        background:#FFFFFF;
        input{
            background: #eeeeee;
            width: 80%;
            height: rpx(80);
            margin: rpx(10) rpx(20);
            border-radius:$radius30;
            padding: 0 rpx(20);
        }
    }
    //底部
    .buyBar {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: $color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding:0 rpx(10);
        &-list{
            display: flex;
            align-items: center;
            width: 100%;
            height: rpx(90);
            &-comment{
              /*height: rpx(56);*/
              input{
                  background: #eeeeee;
                  padding: 0 rpx(20);
                  height:rpx(60) ;
                  margin: rpx(10) rpx(20);
                  border-radius:$radius30;

              }
             }
            &-item{
                flex: 1;
                display: flex;
                justify-content: center;
                margin-right:rpx(10);
                &-btn{
                    position: relative;
                    width: rpx(90);
                    text-align: center;
                    .icon{
                        width: rpx(48);
                        height: rpx(48);
                    }
                    .badge{
                        position: absolute;
                        top: rpx(-10);
                        left: 50%;
                        margin-left: rpx(24);
                        font-size: rpx(24);
                    }
                }
            }
            &-back{
                border-right: 1px solid $color2;
                width: rpx(90);
                height: rpx(90);
                text-align: center;
                &-icon{
                    margin-top:rpx(18) ;
                    width: rpx(60);
                    height: rpx(60);
                }
            }
        }
    }

    /*弹窗*/
    .log-popup{
        width: rpx(500);
        height: rpx(300);
        /*padding: rpx(40) rpx(20);*/
        position: relative;
        &-text{
          text-align: center;
          padding-top: rpx(80);
          font-size: rpx(40);
          font-weight: bold;
          color: #666666;
         }
        &-button{
             width: 100%;
             position: absolute;
             bottom: 0;
             text-align: center;
             height:rpx(100);
             line-height: rpx(100);

    /*left: 22%;*/
             &-default{
                 display: inline-block;
                 background: #ff5e13;
                 width: 50%;
                 color: #FFFFFF;
                 height: rpx(100);
                 line-height: rpx(100);
                  border-radius: rpx(10);

              }
             &-primary{
                  display: inline-block;
                  background: rgba(204, 204, 204, 0.37);
                  width: 50%;
                  height: rpx(100);
                  line-height: rpx(100);
                  border-radius: rpx(10);

              }
         }
    }
    .mint-popup{
        border-radius: rpx(10);
    }
</style>
<style lang="scss">
    @import "../assets/base";
    .article-bar-video .container{
        height: 100%;
        background-color: $color1;
    }
    .article-bar-video .container .__cov-video-container{
        height: 100%;
        z-index: 997;
    }
    .article .__cov-video-container .__cov-contrl-content{
        display: block!important;
    }

    .article{
        &-content{
            padding: rpx(30);
            font-size: rpx(30);
            line-height: 160%;
            word-break: break-word;
            img{
                padding: rpx(10) 0;
                max-width: 100% !important;
                height: auto;
            }
        }
    }
</style>